<template>
  <div class="prettier-test">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <ul>
      <li v-for="item in items" :key="item.id" @click="selectItem(item)">
        {{ item.name }} - {{ formatPrice(item.price) }}
      </li>
    </ul>
    <div class="summary">总价: {{ formatPrice(totalPrice) }}</div>
    <button type="button" @click="addItem">添加项目</button>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'

  const title = ref('Prettier 格式化测试')
  const message = ref('这是一个用于测试 Prettier 格式化效果的 Vue 组件')
  const items = ref([
    { id: 1, name: '项目一', price: 100 },
    { id: 2, name: '项目二', price: 200 },
    { id: 3, name: '项目三', price: 300 }
  ])

  const totalPrice = computed(() => items.value.reduce((total, item) => total + item.price, 0))

  function formatPrice(price: number): string {
    return `¥${price.toFixed(2)}`
  }

  function selectItem(item: { id: number; name: string; price: number }): void {
    alert(`您选择了: ${item.name}`)
  }

  function addItem(): void {
    const newId = Math.max(...items.value.map(item => item.id)) + 1
    items.value.push({
      id: newId,
      name: `项目${newId}`,
      price: Math.floor(Math.random() * 500) + 100
    })
  }
</script>

<style scoped lang="scss">
  .prettier-test {
    padding: 20px;
    background-color: #f5f5f5;

    h1 {
      font-size: 24px;
      color: #333;
      margin-bottom: 16px;
    }

    p {
      color: #666;
      margin-bottom: 20px;
    }

    ul {
      list-style-type: none;
      padding: 0;

      li {
        padding: 8px;
        margin-bottom: 8px;
        background-color: #fff;
        border-radius: 4px;
        cursor: pointer;

        &:hover {
          background-color: #e0e0e0;
        }
      }
    }

    button {
      padding: 8px 16px;
      background-color: #4caf50;
      color: #fff;
      border: 0;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background-color: #45a049;
      }
    }
  }
</style>
